<template>
    <view class="productList" @scroll="scrollFun">
        <div class="top">
            <uniSearchBar :placeholder="defaultSearch" radius="36" cancelButton="none" v-model="keywords"
                navPadding="32" navWidth="500"></uniSearchBar>
            <label @click="searchFun()">搜索</label>
        </div>
        <view class="heng" v-if="dataList.length > 0"></view>
        <view class="content" v-for="(item,index) in dataList" :key="index" v-if="item.productList.length > 0">
            <view class="title">
                {{item.title}}
            </view>
            <view class="list">
                <view class="list_item" v-for="(product,index2) in item.productList" :key="index2">
                    <image :src="product.picture" lazy-load="true" mode=""></image>
                    <view class="item_text">{{product.name}}</view>
                    <view class="item_text1">
                        <text>{{product.price > 0 ? '￥'+product.price : ''}}</text>
                    </view>
                    <view class="item_text1" v-if="product.isSpec == 0">
                        <view class="uni-numbox" v-if="mainList[product.id].cartNum > 0">
                            <view class="uni-numbox-minus" @click="_calcValue('subtract', 'main', product.id)">-</view>
                            <view class="uni-numbox-value">{{mainList[product.id].cartNum}}</view>
                            <view class="uni-numbox-plus" @click="_calcValue('add', 'main', product.id)">+</view>
                        </view>
                        <image v-if="mainList[product.id].cartNum == 0" src="../static/img/add.png" mode="scaleToFill"
                            @click="operateCart(product.sku_id, product.min_buy)"></image>
                    </view>
                    <view class="item_text2" v-if="product.isSpec == 1" @click="showAttrList(product.id)">
                        <view class="attrBtn">规格</view>
                        <view class="showNum" v-if="mainList[product.id].cartNum > 0">{{mainList[product.id].cartNum}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <movable-view class="xf" direction="all" style="top: 60%;" @click="openFun()">
            <image src="../static/img/cate.png" mode="scaleToFill"></image>
        </movable-view>
        <view class="heng" v-if="dataList.length > 0" style="height: 100upx;"></view>
        <view @click="showCartList" class="bottom">
            <view class="bottom_con">
                <view class="left">
                    <view class="car">
                        <image class="item_add" src="https://hdsq.aoorange.cn/attachment/xcx/icon/gouwuche.png"
                            mode="aspectFill"></image>
                        <view class="car_num">{{cartTotalNum}}</view>
                    </view>
                    <view class="car_pic">
                        <text>￥{{cartTotalMoney}}</text>
                        <text v-if="totalTablewareFee > 0">另需茶位费{{totalTablewareFee}}元</text>
                    </view>
                </view>
                <view class="right">
                    去结算
                </view>
            </view>
        </view>
        <view v-if="dataList.length == 0" class="nocontent">
            <image src="http://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
            <!-- <text>暂未找到记录～</text> -->
        </view>
        <uni-popup ref="categoryList" maskClick="ture" type="top" animation="ture" v-show="showPopup == 1">
            <view class="city">
                <view v-for="(item, index) in resultList" @click="categoryClickMain(index)" class="city_name">
                    <text>{{ item.title }}</text>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="cartList" maskClick="ture" type="bottom" animation="ture" v-show="showPopup == 2">
            <view class="popup_model">
                <view class="popup_text">
                    <text>已选商品</text>
                    <view class="del" @click="delAll">
                        <image src="https://hdsq.aoorange.cn/attachment/xcx/icon/del.png" mode="widthFix"></image>
                        <text>清空</text>
                    </view>
                </view>
                <view class="line">
                    <view class="item" v-for="(item,index) in cartList" :key="index" v-if="item.cartNum > 0">
                        <view class="left">
                            <text class="oneline">{{item.name}}</text>
                            <text class="oneline">{{item.dataName}}</text>
                        </view>
                        <view class="right">
                            <text class="item_pic">￥{{item.price}}</text>
                            <image class="item_img" @click="_calcValue('subtract', 'cart', index)"
                                src="https://hdsq.aoorange.cn/attachment/xcx/icon/orderFood_noadd.png" mode="widthFix">
                            </image>
                            <text class="item_num">{{item.cartNum}}</text>
                            <image @click="_calcValue('add', 'cart', index)"
                                src="https://hdsq.aoorange.cn/attachment/xcx/icon/orderFood_add.png" mode="widthFix">
                            </image>
                        </view>
                    </view>
                </view>
                <view class="bottom_con">
                    <view class="left">
                        <view class="car">
                            <image class="item_add" src="https://hdsq.aoorange.cn/attachment/xcx/icon/gouwuche.png"
                                mode="aspectFill"></image>
                            <view class="car_num">{{cartTotalNum}}</view>
                        </view>
                        <view class="car_pic">
                            <text>￥{{cartTotalMoney}}</text>
                            <text v-if="totalTablewareFee > 0">另需茶位费{{totalTablewareFee}}元</text>
                        </view>
                    </view>
                    <view class="right" @click="subOrder()">
                        去结算
                    </view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="medal" type="bottom" animation="ture">
            <view class="medalInfo">
                <view class="logoocss-imgbox">
                    <image :src="goods.picture"  class="logoocss-img"></image>
                </view>
                <view class="popbox">
                    <image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close.png"
                        mode="aspectFill"></image>
                    <view class="title">{{goods.title}}</view>
                    <view class="title" style="height: 60upx;line-height: 60upx;">价格：￥{{goods.price}} 库存：{{goods.stock}}</view>
                    <scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
                        <view class="goods_size" v-for="(item, index) in goods.base_attribute_format" :key="index">
                            <text class="title">{{item.name}}</text>
                            <view class="size_item">
                                <text
                                    :class="selAttrList[item.id] && selAttrList[item.id] == attrVal.base_spec_value_id ?'sel':'nosel'"
                                    v-for="(attrVal,index1) in item.value" :key="index1"
                                    @click="selAttrFun(index, index1)"
                                    :style="item.widthStr + (noStockList.indexOf(attrVal.base_spec_value_id) >= 0 ? 'color: #ddd;' : '')">{{attrVal.title}}</text>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="goods_num1">
                        <text>购买数量</text>
                        <view class="uni-numbox">
                            <view class="uni-numbox-minus" @click="_calcValue('subtract', 'goods', 0)">-</view>
                            <text class="item_num">{{goods.cartNum}}</text>
                            <view class="uni-numbox-plus" @click="_calcValue('add', 'goods', 0)">+</view>
                        </view>
                    </view>
                    <view class="receive_bot" @click="subReceive()">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../static/request.js';
    import storage from '../static/appkey.js';
    import common from '../static/jump.js';
    import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
    export default {
        components: {
            uniSearchBar
        },
        data() {
            return {
                defaultSearch: '菜品名称',
                keywords: {
                    value: '',
                },
                cartTotalNum: 0,
                merchantId: 0,
                deskId: 0,
                peopleNum: 0,
                type: 2,
                resultList: [],
                mainList: [],
                dataList: [],
                cartList: [],
                cartNumList: [],
                showPopup: 0,
                tableware_fee: 0,
                totalTablewareFee: 0,
                cartTotalMoney: 0,
                categoryHeightList: [],
                scrollTop: 0,
                goods: {},
                attributeList: [],
                skuList: [],
                selAttrList: [],
                noStockList: [],
                buyNum: 0,
                selSkuId: 0,
            }
        },
        methods: {
            showAttrList(productId) {
                _self.selAttrList = [];
                _self.selSkuId = 0;
                _self.buyNum = 0;
                serve.request({
                    url: '/lobby/product/view',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: productId,
                    }
                }).then(res => {
                    _self.goods = res.data;
                    _self.attributeList = res.data.base_attribute_format;
                    _self.skuList = res.data.sku;
                    if( _self.attributeList.length > 0) {
                    	_self.attributeList.forEach((item, key) => {
                    		// if(item.value.length == 1) {
                    			// let firstValue = item.value[0];
                    			// _self.$set(_self.selAttrList, item.id, firstValue.base_spec_value_id);
                                _self.selAttrFun(key, 0);
                    		// }
                    	});
                        
                    }
                    // _self.obtainStock('');
                    _self.$refs.medal.open();
                });
            },
            close() {
                _self.$refs.categoryList.close();
                _self.$refs.cartList.close();
                _self.$refs.medal.close();
            },
            selAttrFun(index, index1) {
            	if(_self.noStockList.indexOf(_self.attributeList[index].value[index1].base_spec_value_id) >= 0) {
            		return ;
            	}
            	if(_self.selAttrList[_self.attributeList[index].id] == _self.attributeList[index].value[index1].base_spec_value_id) {
            		_self.selAttrList[_self.attributeList[index].id] = 0;
            	} else {
            		_self.$set(_self.selAttrList, _self.attributeList[index].id,  _self.attributeList[index].value[index1].base_spec_value_id);
            	}	
                let data = '';
            	_self.attributeList.forEach((item, key) => {
            		if(_self.selAttrList[item.id]){
            			item.value.forEach((attrVal, key) => {
            				if(attrVal.base_spec_value_id == _self.selAttrList[item.id]) {
            					data = data ? data + '-'+attrVal.base_spec_value_id : attrVal.base_spec_value_id;
            				}
            			});
            		}
            	});
            	_self.skuList.forEach((item, key) => {
            		if(item.data == data) {
            			_self.goods.sku_id = item.sku_id;
                        _self.goods.price = item.price;
                        _self.goods.stock = item.stock;
                        _self.goods.cartNum = item.cartNum;
                        _self.goods.isCart = item.isCart;
            			return ;
            		}
            	});
            	_self.obtainStock(data);
            	_self.$forceUpdate();
            },
            obtainStock(data) {
            	_self.noStockList = [];
            	if(_self.attributeList.length == 1) {
            		_self.skuList.forEach((item, key) => {
            			if(item.stock == 0) {
            				_self.noStockList.push(item.data);
            			}
            		});
            	} else {
            		if(data == '') {
            			return ;
            		}
            		let nowDataNum = data.split("-");
            		if(_self.attributeList.length - nowDataNum.length <= 1) {
            			for(let j in nowDataNum){
            				_self.skuList.forEach((item, key) => {
            					// console.info("1 - " + item.data);
            					if(item.data.indexOf(nowDataNum[j]) >= 0 && item.stock == 0) {
            						let dataArr = item.data.split("-");
            						// console.info("2 - " +dataArr);
            						for(let i in dataArr) {
            							// console.info("3 - " +dataArr[i]);
            							if(nowDataNum.indexOf(dataArr[i]) < 0) {
            								_self.noStockList.push(dataArr[i]);
            							}
            						}
            					}
            				});
            			}
            		}
            	}
            },
            searchFun() {
                let kw = _self.keywords.value;
                _self.dataList = JSON.parse(JSON.stringify(_self.resultList));
                let tempList = JSON.parse(JSON.stringify(_self.dataList));
                if (kw != '') {
                    let delKey = [];
                    tempList.forEach((item, key) => {
                        _self.dataList[key].productList = [];
                        item.productList.forEach((i, k) => {
                            if (i.name.indexOf(kw) >= 0) {
                                _self.dataList[key].productList.push(i);
                            }
                        });
                        if (_self.dataList[key].productList.length == 0) {
                            delKey.push(key);
                        }
                    });
                    if (delKey.length == _self.dataList.length) {
                        _self.dataList = [];
                    } else {
                        for (let j in delKey) {
                            _self.dataList.splice(delKey[j], 1);
                        }
                    }
                }
                _self.$forceUpdate();
                return;
            },
            openFun() {
                _self.showPopup = 1;
                _self.$refs.categoryList.open();
            },
            showCartList() {
                _self.showPopup = 2;
                _self.$refs.cartList.open();
            },
            categoryClickMain(index) {
                let categoryHeightItem = _self.categoryHeightList[index];
                var query = uni.createSelectorQuery().in(this);
                _self.scrollTop = categoryHeightItem.topNum;
                uni.pageScrollTo({
                    duration: 0,
                    scrollTop: _self.scrollTop
                })
                _self.showPopup = 0;
                _self.$refs.categoryList.close();
            },
            getList() {
                serve.request({
                    url: '/lobby/product/list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        merchantId: _self.merchantId,
                        type: _self.type,
                        peopleNum: _self.peopleNum,
                    }
                }).then(res => {
                    _self.tableware_fee = res.data.tableware_fee;
                    _self.totalTablewareFee = res.data.totalTablewareFee;
                    _self.resultList = res.data.list;
                    _self.dataList = JSON.parse(JSON.stringify(res.data.list));
                    let startHeight = 108;
                    let temp = [];
                    _self.dataList.forEach((item, key) => {
                        item.productList.forEach((v, k) => {
                            let skuTemp = {
                                sku_id: v.sku_id,
                                max_buy: v.max_buy,
                                min_buy: v.min_buy,
                                cartNum: v.cartNum,
                            };
                            _self.$set(_self.mainList, v.id, skuTemp);
                        });
                        let cateHeight = 0;
                        let productNum = item.productList.length;
                        let lineNum = (Number(productNum) + Number(2) - Number(1)) / Number(2);
                        let itemHeight = Number(84) + Number(lineNum * 290);
                        if (key == 0) {
                            cateHeight = startHeight;
                        } else {
                            let prevItem = temp[key - 1];
                            cateHeight = Number(prevItem.topNum) + Number(prevItem.heightNum);
                        }
                        let heightItem = {
                            cateId: item.id,
                            topNum: cateHeight,
                            heightNum: itemHeight
                        };
                        _self.$set(temp, key, heightItem);
                    });
                    _self.categoryHeightList = temp;
                });
            },
            getCartList() {
                serve.request({
                    url: '/lobby/product/cart-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        merchantId: _self.merchantId,
                    }
                }).then(res => {
                    _self.cartTotalNum = res.data.totalNum;
                    _self.cartTotalMoney = res.data.totalMoney;
                    _self.cartList = res.data.cartList;
                });
            },
            _calcValue(type, scene, kk) {
                let skuItem = false;
                if(scene == 'main') {
                    skuItem = _self.mainList[kk];
                } else if(scene == 'goods') {
                    skuItem = _self.goods;
                } else {
                    skuItem = _self.cartList[kk];
                }
                if(!skuItem) {
                    return ;
                }
                let skuId = skuItem.sku_id;
                let value = skuItem.cartNum;
                let step = skuItem.min_buy;

                if (type === 'subtract') {
                    value -= step
                } else if (type === 'add') {
                    value = parseInt(Number(value) + Number(step))
                }
                if (value == 0) {
                    if(scene == 'goods' && skuItem.isCart == 0) {
                        return ;
                    }
                    uni.showModal({
                        title: '提示',
                        content: '您确定删除该产品吗',
                        success: function (res) {
                            if (res.confirm) {
                                _self.operateCart(skuId, 0);
                                _self.close();
                            }
                        },
                    });
                    return;
                }
                if (skuItem.max_buy > 0 && value > skuItem.max_buy) {
                    return
                }
                if(scene == 'goods') {
                    _self.goods.cartNum = value;
                    _self.skuList.forEach((item, key) => {
                    	if(item.sku_id == skuId) {
                    		item.cartNum = _self.goods.cartNum;
                    		return ;
                    	}
                    });
                    _self.$forceUpdate();
                    return ;
                }
                _self.operateCart(skuId, value);
            },
            subReceive() {
                // let skuItem = _self.goods;
                _self.operateCart(_self.goods.sku_id, _self.goods.cartNum);
                _self.close();
            },
            operateCart(skuId, number) {
                serve.request({
                	url: '/lobby/product/operate-cart',
                	data:{
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token'),
                		'sku_id':skuId,
                		num:number,
                	}
                }).then(res => {
                	uni.showToast({
                		title:res.message,
                	});
                	if(res.code == 200) {
                		_self.totalSelFun(res.data);
                	} 
                });
            },
            delAll(){
            	if(_self.selTotalNum == 0) {
            		uni.showToast({
            			title: "请选择要删除的产品",
            			icon: 'none'
            		});
            		return ;
            	}
            	let skuIds = '';
            	_self.cartList.forEach((v, k) => {
                    if (v.cartNum > 0) {
                        skuIds += v.sku_id + ',';
                    }
            	});
            	uni.showModal({
            	    title: '提示',
            	    content: '您确定删除选择的产品吗',
            	    success: function (res) {
            	        if (res.confirm) {
            	            serve.request({
            					url: '/lobby/product/operate-cart',
            					data:{
            						appkey: uni.getStorageSync('appkey'),
            						'access-token': uni.getStorageSync('access-token'),
            						'sku_id':skuIds,
            						num : -1,
            					}
            				}).then(res => {
            					uni.showToast({
            						title:res.message,
            					});
            					if(res.code == 200) {
            						_self.dataList.forEach((item, key) => {
            						    item.productList.forEach((v, k) => {
            						        _self.$set(_self.mainList[v.id], 'cartNum', 0);
            						    });
                                    });
                                    _self.cartList = [];
                                    _self.cartTotalNum = 0;
                                    _self.cartTotalMoney = 0.00;
                                    _self.close();
                                    _self.$forceUpdate();
            					} 
            				});
            	        } 
            	    }
            	});
            },
            totalSelFun(temp) {
                let isIn = false;
                _self.cartList.forEach((v, k) => {
                    if(v.sku_id == temp.sku_id) {
                        isIn = true;
                        _self.cartTotalNum = _self.cartTotalNum - v.cartNum;
                        _self.cartTotalMoney = _self.cartTotalMoney - v.totalMoney;
                        console.info(_self.cartTotalNum + " --- " + _self.cartTotalMoney);
                        if(temp.cartNum == 0) {
                            _self.cartList.splice(k, 1);
                        } else {
                            _self.cartTotalNum = _self.cartTotalNum * 1 + temp.cartNum * 1 ;
                            _self.cartTotalMoney = _self.cartTotalMoney * 1 + temp.totalMoney * 1;
                            v.cartNum = temp.cartNum;
                            v.totalMoney = temp.totalMoney;
                        }
                        console.info(_self.cartTotalNum + " --- " + _self.cartTotalMoney);
                    }
                });
                if(!isIn) {
                    _self.cartList.push(temp);
                    _self.cartTotalNum = _self.cartTotalNum * 1 + temp.cartNum * 1 ;
                    _self.cartTotalMoney = _self.cartTotalMoney * 1 + temp.totalMoney * 1;
                }
                _self.mainList[temp.pid].cartNum = temp.pNum;
                _self.$forceUpdate();
            },
            
            subOrder() {
                let cartIds = '';
                console.info(_self.cartList);
                _self.cartList.forEach((item, index) => {
                    if (item.cartNum > 0) {
                        cartIds += item.id + ',';
                    }
                });
                if (cartIds == '') {
                    uni.showToast({
                        title: "请点菜",
                        icon: 'none'
                    });
                    return;
                }
                uni.showLoading({
                	title: '提交中···',
                	mask: true
                });
                uni.navigateTo({
                    url: '/lobbyEat/eatOrder?orderId=' + _self.orderId + '&data='+cartIds
                });
            },
            
            jump(jump_type, jump_link) {
                common.jump(jump_type, jump_link);
            }
        },
        onLoad(options) {
            _self = this;
            _self.merchantId = options.merchantId || 0;
            if (_self.merchantId == 0) {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                });
                common.jump('return_one');
            }
            _self.orderId = options.orderId || 0;
            if (_self.orderId == 0) {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                });
                common.jump('return_one');
            }
        },
        async onShow() {
            await _self.$defaultLogin();
            _self.getCartList();
            _self.getList();
        },
        onPullDownRefresh() {
            _self.getCartList();
            _self.getList();
        }
    }
</script>

<style scoped lang="scss">
    .productList {
        .top {
            padding: 30upx;
            display: flex;
            align-items: center;
            color: #39486b;

            .uni-searchbar {
                flex: 1;
            }

            label {
                font-size: 32upx;
                margin-left: 47upx;

            }
        }

        .xf {
            position: fixed;
            left: 630upx;
            top: 70%;
            width: 90upx;
            height: 90upx;

            image {
                width: 100%;
                height: 100%;
            }

            text {
                position: absolute;
                width: 30upx;
                height: 30upx;
                right: 5upx;
                line-height: 30upx;
                text-align: center;
                border-radius: 50%;
                font-size: 18upx;
                background: red;
                color: #FFFFFF;
            }
        }

        .content {
            box-sizing: border-box;
            width: 100%;
            padding: 48upx 30upx 50upx;
            border-bottom: 16upx #FBFBFD solid;

            .title {
                position: relative;
                width: 130upx;
                font-size: 24upx;
                text-align: center;
                height: 24upx;
                line-height: 24upx;
                color: #666666;
            }

            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: #3939FD;
                border-radius: 2upx;
            }

            .list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding: 30upx 0upx 0upx;

                .list_item {
                    width: 330upx;
                    padding-bottom: 52upx;

                    image {
                        width: 330upx;
                        height: 340upx;
                    }

                    .item_text {
                        margin-top: 30upx;
                        font-size: 32upx;
                        font-weight: bold;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .item_text1 {
                        display: flex;
                        align-items: center;

                        text:nth-child(1) {
                            font-size: 32upx;
                            color: #FF5F60;
                        }

                        text:nth-child(2) {
                            font-size: 24upx;
                            color: #CCCCCC;
                            margin-left: 12upx;
                            text-decoration: line-through
                        }

                        image {
                            width: 64upx;
                            height: 64upx;
                        }

                        .uni-numbox {
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-start;
                            height: 64upx;
                            border: 1upx solid rgba(60, 72, 104, 0.1);
                            border-radius: 32upx;
                            overflow: hidden;
                        }

                        .uni-numbox-minus,
                        .uni-numbox-plus {
                            margin: 0;
                            background-color: #f9f9f9;
                            width: 100upx;
                            height: 100%;
                            line-height: 64upx;
                            text-align: center;
                            color: #555555;
                        }
                        .item_num{
                            width: 100upx;
                            text-align: center;
                            height: 70upx;
                            line-height: 70upx;
                        }
                        .uni-numbox-value {
                            // border: 1upx solid #cccccc;  
                            background-color: #ffffff;
                            width: 100upx;
                            height: 100%;
                            line-height: 64upx;
                            border-right: 1upx rgba(60, 72, 104, 0.06) solid;
                            border-left: 1upx rgba(60, 72, 104, 0.06) solid;
                            text-align: center;
                        }

                        .uni-numbox-disabled {
                            color: #c0c0c0;
                        }
                    }

                    .item_text2 {
                        position: absolute;
                        width: 330upx;

                        .attrBtn {
                            width: 100%;
                            text-align: center;
                            background-color: #FFAF02;
                            line-height: 60rpx;
                        }

                        .showNum {
                            position: absolute;
                            top: -10px;
                            right: 0;
                            background-color: #ff0000;
                            text-align: center;
                            border-radius: 10rpx;
                            padding: 5rpx 10rpx;
                            color: #fff;
                        }
                    }
                }
            }
        }

        .nocontent {
            width: 100%;
            padding-top: 338upx;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 220upx;
                height: 220upx;
            }

            text {
                font-size: 28upx;
                color: rgba(204, 204, 204, 1);
                margin-top: 30upx;
            }
        }

        .heng {
            width: 100%;
            height: 20upx;
            background: #F7F7F7;
        }

        .city {
            display: flex;
            min-height: 100vh;
            width: 200upx;
            background: #ffffff;
            position: absolute;
            left: 0;
            top: 0;
            flex-direction: column;
            font-size: 30upx;

            .city_name {
                width: 100%;
                display: flex;
                padding: 30upx 0upx;
                justify-content: center;
                align-items: center;
                color: rgba(57, 72, 107, 0.5);

                .city_title {
                    color: #333333;
                    font-weight: bold;
                }

                image {
                    width: 25upx;
                    height: 35upx;
                    margin-left: 10upx;
                }
            }

            .on {
                color: #333333;
                font-weight: bold;
            }
        }

        .popup_model {
            position: fixed;
            bottom: 0upx;
            width: 100%;
            background: #FFFFFF;

            .popup_top {
                width: 100%;
                height: 80upx;
                background: rgba(247, 240, 238, 1);
                color: #EB5938;
                font-size: 24upx;
                line-height: 80upx;
                text-align: center;
            }

            .popup_text {
                box-sizing: border-box;
                padding: 43upx 30upx 0upx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24upx;
                color: #999999;

                .del {
                    display: flex;
                    align-items: center;
                    color: #CCCCCC;

                    image {
                        width: 32upx;
                        height: 31upx;
                        margin-right: 11upx;
                    }
                }
            }

            .line {
                box-sizing: border-box;
                padding: 55upx 30upx;
                border-bottom: 1upx #EBECF0 solid;

                .item {
                    display: flex;
                    justify-content: space-between;
                    padding-bottom: 37upx;

                    .left {
                        display: flex;
                        flex-direction: column;

                        text:nth-child(1) {
                            font-size: 32upx;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                        }

                        text:nth-child(2) {
                            font-size: 20upx;
                            color: #999999;
                            margin-top: 16upx;
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        .item_pic {
                            font-size: 28upx;
                            color: #EB5938;
                            font-weight: bold;
                        }

                        .item_num {
                            font-size: 36upx;
                            color: #333333;
                            font-weight: bold;
                            padding: 0upx 30upx;
                        }

                        image {
                            width: 40upx;
                            height: 40upx;
                        }

                        .item_img {
                            margin-left: 23upx;
                        }
                    }
                }
            }

            .other_pic {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 80upx;
                padding: 0upx 30upx;
                box-sizing: border-box;

                text:nth-child(1) {
                    color: #333333;
                    font-size: 28upx;
                }

                text:nth-child(2) {
                    color: #EB5938;
                    font-size: 28upx;
                    font-weight: bold;
                }
            }

            .bottom_con {
                width: 100%;
                display: flex;
                justify-content: space-between;
                height: 100upx;
                background: #FFFFFF;
                border-top: 1upx #EBECF0 solid;

                .left {
                    height: 100upx;
                    display: flex;
                    align-items: center;

                    .car {
                        margin-left: 28upx;
                        position: relative;

                        image {
                            width: 44upx;
                            height: 41upx;
                        }

                        .car_num {
                            position: absolute;
                            top: -10upx;
                            right: -10upx;
                            background-color: #EB5938;
                            border-radius: 50%;
                            font-size: 14upx;
                            color: #FFFFFF;
                            width: 20upx;
                            height: 20upx;
                            text-align: center;
                            line-height: 20upx;
                            padding: 4upx;
                        }
                    }

                    .car_pic {
                        display: flex;
                        flex-direction: column;
                        margin-left: 33upx;

                        text:nth-child(1) {
                            color: #EB5938;
                            font-size: 32upx;
                            font-weight: bold;
                        }

                        text:nth-child(2) {
                            color: #999999;
                            font-size: 20upx;
                        }
                    }
                }

                .right {
                    width: 240upx;
                    height: 100upx;
                    line-height: 100upx;
                    color: #FFFFFF;
                    font-size: 28upx;
                    text-align: center;
                    background: rgba(235, 89, 56, 1);
                }
            }
        }

        .bottom {
            width: 100%;
            position: fixed;
            bottom: 0upx;

            .bottom_coupic {

                width: 100%;
                height: 80upx;
                line-height: 80upx;
                color: #EB5938;
                font-size: 24upx;
                text-align: center;
                background: rgba(247, 240, 238, 1);
            }

            .bottom_con {
                width: 100%;
                display: flex;
                justify-content: space-between;
                height: 100upx;
                background: #FFFFFF;
                border-top: 1upx #EBECF0 solid;

                .left {
                    height: 100upx;
                    display: flex;
                    align-items: center;

                    .car {
                        margin-left: 28upx;
                        position: relative;

                        image {
                            width: 44upx;
                            height: 41upx;
                        }

                        .car_num {
                            position: absolute;
                            top: -10upx;
                            right: -10upx;
                            background-color: #EB5938;
                            border-radius: 50%;
                            font-size: 14upx;
                            color: #FFFFFF;
                            width: 20upx;
                            height: 20upx;
                            text-align: center;
                            line-height: 20upx;
                            padding: 4upx;
                        }
                    }

                    .car_pic {
                        display: flex;
                        flex-direction: column;
                        margin-left: 33upx;

                        text:nth-child(1) {
                            color: #EB5938;
                            font-size: 32upx;
                            font-weight: bold;
                        }

                        text:nth-child(2) {
                            color: #999999;
                            font-size: 20upx;
                        }
                    }
                }

                .right {
                    width: 240upx;
                    height: 100upx;
                    line-height: 100upx;
                    color: #FFFFFF;
                    font-size: 28upx;
                    text-align: center;
                    background: rgba(235, 89, 56, 1);
                }
            }
        }

        .medalInfo {
            width: 100%;
            padding-bottom: 200upx;
            max-height: 90vh;
            min-height: 30vh;
            overflow: hidden;
            // position: relative;
            z-index: 200;

            .logoocss-imgbox {
                width: 100%;
                height: 150upx;
                z-index: 300;
                position: relative;
                left: 30upx;
                top: 180upx;

                image {
                    width: 150upx;
                    height: 150upx;
                    margin-left: 20upx;
                }
            }

            .popbox {
                width: calc(100% - 100upx);
                max-height: 900upx;
                margin: 0 30upx;
                padding: 20upx;
                overflow: hidden;
                position: relative;
                border-radius: 20upx;
                background: rgba(#fff, 1);

                .close {
                    position: absolute;
                    width: 30upx;
                    height: 30upx;
                    right: 50upx;
                    top: 50upx;
                    z-index: 666;
                }

                .title {
                    width: 100%;
                    height: 100upx;
                    line-height: 100upx;
                    font-size: 32upx;
                    padding-left: 170upx;
                    // border-bottom: 1upx rgba(251, 251, 253, 1) solid;
                }
            }

            .receive_bot {
                width: calc(100% - 200upx);
                height: 100upx;
                margin: 20upx 100upx;
                color: #fff;
                font-size: 32upx;
                line-height: 100upx;
                text-align: center;
                border: 3upx #ffdd00;
                border-radius: 50upx;
                background-color: #FFCC00;

                &::after {
                    border: none;
                }
            }
        }
        
        .scroll{
        	max-height: 500upx;
            margin-top: 20rpx;
            border: 2upx #a1a1e8  solid;
        	// padding-bottom: 100upx;
        	.goods_size {
        		padding: 0upx 0upx 0upx 30upx;
        		box-sizing: border-box;
        	
        		.title {
        			font-size: 32upx;
        			margin-left: 13upx;
                    padding-left: 0;
        		}
        	
        		.size_item {
        			display: flex;
        			flex-wrap: wrap;
        			// justify-content: space-;
        			padding: 15upx 0upx 27upx;
        			font-size: 28upx;
        	
        			.sel {
        				width: 210upx;
        				// min-width: 210upx;
        				// padding: 0 30upx;
        				height: 64upx;
        				line-height: 64upx;
        				text-align: center;
        				background: rgba(245, 245, 245, 1);
        				border-radius: 32upx;
        				margin-right: 30upx;
        				margin-top: 12upx;
        				color: #FFFFFF;
        				background: rgba(255, 200, 10, 1);
        			}
        	
        			.nosel {
        				width: 210upx;
        				// min-width: 210upx;
        				// padding: 0 30upx;
        				height: 64upx;
        				margin-right: 30upx;
        				line-height: 64upx;
        				text-align: center;
        				background: rgba(245, 245, 245, 1);
        				border-radius: 32upx;
        				margin-top: 12upx;
        	
        				color: rgba(57, 72, 107, 0.8);
        			}
        		}
        	}
        }
        .goods_num1{
        	padding: 20upx 30upx 20upx;
        	display: flex;
        	align-items: center;
        	justify-content: space-between;
        	font-size:32upx;
        	.uni-numbox {  
        		display: flex;  
        		flex-direction: row;  
        		justify-content: flex-start;  
        		height: 64upx;  
        		border:1upx solid rgba(60,72,104,0.1);
        		border-radius:32upx;
        		overflow: hidden;
        	}  
            .item_num{
                width: 100upx;
                text-align: center;
                height: 70upx;
                line-height: 70upx;
            }
        	.uni-numbox-minus,  
        	.uni-numbox-plus {  
        		margin: 0;  
        		background-color: #f9f9f9;  
        		width: 100upx;  
        		height: 100%;  
        		line-height: 64upx;  
        		text-align: center;  
        		color: #555555;  
        	}  
        
        	.uni-numbox-value {  
        		background-color: #ffffff;  
        		width: 100upx;  
        		height: 100%; 
        		 border-right: 1upx rgba(60,72,104,0.06) solid;
        		 border-left: 1upx rgba(60,72,104,0.06) solid;
        		text-align: center;  
        	}  
        
        	.uni-numbox-disabled {  
        		color: #c0c0c0;  
        	}  
        }
    }
</style>
